<template>
  <el-dialog title="打标操作" :visible.sync="labelFlag" :append-to-body="true" :lock-scroll="false" width="50%"
    z-index="2007">
    <div style="width: 100%; height: 430px">
      <div style="height: 300px; margin-left: 25px">
        <el-form label-width="100px" class="demo-ruleForm">
          <div>
            <el-tag @click="addLabel(item)" v-bind:type="selectedLabels.indexOf(item) != -1
              ? 'success'
              : 'primary'
              " style="margin-left: 15px" v-for="item in orderLabelsAll" :key="item">{{ item }}</el-tag>
          </div>
        </el-form>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="labelFlag = false">关闭</el-button>
      <el-button type="primary" @click="submitLabels('确定')">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  getOrderLabels, // 获取所有订单标签
  getOrderLabelsByOrderId, // 根据订单id获取标签
  saveOrderLabels, // 保存订单标签
} from "@/api/pending";

export default {
  props: {
    orderId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      labelFlag: false, //打标弹窗
      orderLabelsAll: [], //所有标签
      selectedLabels: [], //选中的标签
    };
  },
  methods: {
    show() {
      this.labelFlag = true;
      this.getLabels();
    },
    getLabels() {
      getOrderLabels()
        .then((res) => {
          if (res.data && res.data.data) {
            this.orderLabelsAll = res.data.data.split(",");
            getOrderLabelsByOrderId({ orderId: this.orderId })
              .then((res) => {
                if (res.data && res.data.data) {
                  this.selectedLabels = JSON.parse(res.data.data);
                }
              })
          }
        })
    },
    //保存标签
    submitLabels() {
      let ext = "";
      if (this.selectedLabels.length > 0) {
        ext = JSON.stringify(this.selectedLabels);
      }
      let param = {
        orderId: this.orderId,
        extValue: ext,
      };
      saveOrderLabels(param)
        .then((res) => {
          if (res.data && res.data.data) {
            this.labelFlag = false;
            this.$message({
              type: "success",
              message: "操作成功",
            });
          }
        })
    },
    //添加标签
    addLabel(label) {
      if (this.selectedLabels.indexOf(label) != -1) {
        this.selectedLabels.splice(this.selectedLabels.indexOf(label), 1);
      } else {
        this.selectedLabels.push(label);
      }
    },
  }
};
</script>
<style lang="scss" scoped></style>